<template>
  <div>
    <div class="card">
      <div class="card-img">
        <div class="img">
          <img
            v-if="card.img_url"
            :src="card.img_url"
            alt=""
          >
          <img
            v-else
            src="../../../../assets/avatar1.svg"
            alt=""
          >
        </div>
      </div>
      <div class="card-subtitle">{{card.message}}</div>
      <hr class="card-divider">
      <div class="card-footer">
        <div class="card-price"><span>¥</span>{{card.price}}</div>
        <button
          class="card-btn"
          @click="goToBuyRoom"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path d="m397.78 316h-205.13a15 15 0 0 1 -14.65-11.67l-34.54-150.48a15 15 0 0 1 14.62-18.36h274.27a15 15 0 0 1 14.65 18.36l-34.6 150.48a15 15 0 0 1 -14.62 11.67zm-193.19-30h181.25l27.67-120.48h-236.6z"></path>
            <path d="m222 450a57.48 57.48 0 1 1 57.48-57.48 57.54 57.54 0 0 1 -57.48 57.48zm0-84.95a27.48 27.48 0 1 0 27.48 27.47 27.5 27.5 0 0 0 -27.48-27.47z"></path>
            <path d="m368.42 450a57.48 57.48 0 1 1 57.48-57.48 57.54 57.54 0 0 1 -57.48 57.48zm0-84.95a27.48 27.48 0 1 0 27.48 27.47 27.5 27.5 0 0 0 -27.48-27.47z"></path>
            <path d="m158.08 165.49a15 15 0 0 1 -14.23-10.26l-25.71-77.23h-47.44a15 15 0 1 1 0-30h58.3a15 15 0 0 1 14.23 10.26l29.13 87.49a15 15 0 0 1 -14.23 19.74z"></path>
          </svg>
        </button>
      </div>
      <div class="userInfo">
        <div class="info-user"><span>用户:</span>{{card.username}}</div>
        <div class="userRoom"><span>房间:</span>{{card.room_id}}</div>
      </div>

    </div>
  </div>
</template>

<script>
import { searchRoomAPI, joinRoomAPI, getMyJoinRoom } from "@/api/socket";
export default {
  data() {
    return {};
  },
  props: ["card"],

  methods: {
    goToBuyRoom() {
      console.log("点击了");
      this.searchRoom();
    },
    async searchRoom() {
      console.log("点击了发发发");
      console.log(this.card.room_id);
      if (this.card.room_id) {
        const res = await searchRoomAPI(this.card.room_id, 1);
        if (res.status == 0) {
          let room = res.data[0];
          if (room != undefined) {
            console.log("测试一下搜索得到的房间信息，", res.data[0]);
            this.joinRoom(room);
            room = {};
          } else {
            this.$message("房间不存在");
          }
        }
      }
    },
    async joinRoom(room) {
      console.log("点击加入群聊后的信息", room);
      const res2 = await joinRoomAPI({
        room_id: room.id,
        avatar: room.avatar,
        name: room.name,
        author_id: room.user_id,
      });
      if (res2.status == 0) {
        this.$message.success("加入成功");
        // 加载群时获取我已加入的群聊
        this.$store.dispatch("getMyJoinRoom", 0);
        this.$router.push("/my/chat/info");
      }
    },
  },
};
</script>

 <style lang="less" scoped>
/* 提交图片滚动条样式 */
/*定义滚动条宽度和颜色*/
.pre_img::-webkit-scrollbar {
  width: 4px;
}

.pre_img::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.pre_img::-webkit-scrollbar-thumb {
  background: #94f0f0;
}

/* 悬停效果 */
.pre_img::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}
/*提交按钮 */
.el-button--success {
  margin-bottom: 20px;
}
/* 房间号 */
.user-room {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  opacity: 0.6;
}
.user-room-word {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 10px;
  opacity: 0.6;
}
/* 定价 */
.user-price {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  opacity: 0.6;
  margin-top: -40px;
}
.price {
  border-bottom: 1px solid;
  background-color: #fff;
  min-width: 80px;
  margin-left: 10px;
}
/* 商品上传用户头像 */

/* 商品上传头像信息 */

.img-word {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 10px;
  opacity: 0.8;
}

.buy-img {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pre_img {
  width: 250px;
  height: 250px;
  overflow-y: auto;
  border: 1px solid;
  margin-bottom: 15px;
}
.pre_img > img {
  width: 100%;
  height: auto;
}
/* 结束 */
/* 物品说明介绍 */
.buy-dir {
  width: 100%;
  height: 40%;
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  margin-top: -50px;
  opacity: 0.6;
}
.userWords {
  display: flex;
  background-color: #acdccec3;
  margin-top: 4px;
  width: 100%;
  height: 40%;
  padding: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  font-family: cursive;
  font-size: 20px;
  border-radius: 10px;
  background: #fff;
  background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
  line-height: 1.45rem;
  padding: 0.5rem 0.2rem 0.1rem 0.1rem;
}

.userWords > span {
  width: 96%;
  height: 90%;
  overflow: auto; /* 溢出隐藏 */
  text-align: center;
}
/*定义滚动条宽度和颜色*/
.userWords-span::-webkit-scrollbar {
  width: 4px;
}

.userWords-span::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.userWords-span::-webkit-scrollbar-thumb {
  background: #94f0f0;
}

/* 悬停效果 */
.userWords-span::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}

/* 结束 */
/* 编辑抽屉 */
/* 抽屉评论 */
::v-deep .el-drawer__body {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
::v-deep .el-drawer.rtl {
  height: 100%;
  background-color: #b6dbfe;
  border-radius: 10px;
  right: 2%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .el-drawer__container {
  position: relative;

  display: flex;

  left: 0;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  height: 90%;
  width: 100%;
}

::v-deep .el-drawer__wrap.draw-comments {
  background-color: #98c5e5;
}

/* 卡片底部用户信息 */
.userInfo {
  display: flex;
  font-size: 0.8rem;
  margin-top: 3px;
  margin-bottom: -9px;
  justify-content: space-between;
}
.info-user {
  padding-bottom: 5px;
}

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  gap: 20px; /* 设置子元素之间的间距 */
  height: 100%;
  width: 100%;
  position: relative;
  justify-content: center;

  align-content: flex-start;
}
/* 编辑按钮 */
.edit-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e8e8;
  background-color: #959ff8;
  width: 60px;
  height: 60px;
  font-size: 24px;
  text-transform: uppercase;
  border: 2px solid #5bd6fcbb;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15), 2px 2px 2px rgba(0, 0, 0, 0.1),
    -3px -3px 2px rgba(255, 255, 255, 0.05),
    -2px -2px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
  z-index: 7;
  right: 3%;
  top: 13%;
}
.edit-button-span {
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 编辑按钮结束 */
.card {
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  --main-focus: #2d8cf0;
  width: 230px;
  height: 300px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  gap: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  overflow: hidden;
}

.card-img {
  /* clear and add new css */
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  height: 100%;
  overflow: auto;
}
.card-img .img {
  width: 100%;
  height: auto;
}
.card-img .img > img {
  width: 100%;
  height: auto;
}

.card-title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: var(--font-color);
}

.card-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--font-color-sub);
}

.card-divider {
  width: 100%;
  border: 1px solid var(--main-color);
  border-radius: 50px;
}

.card-footer {
  display: flex;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;
}

.card-price {
  font-size: 16px;
  font-weight: 400;
  color: var(--font-color);
}

.card-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--font-color-sub);
}

.card-btn {
  height: 25px;
  background: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 5px;
  padding: 0 15px;
  transition: all 0.3s;
}

.card-btn svg {
  width: 100%;
  height: 100%;
  fill: var(--main-color);
  transition: all 0.3s;
}

.card-img:hover {
  transform: translateY(-3px);
}

.card-btn:hover {
  border: 2px solid var(--main-focus);
}

.card-btn:hover svg {
  fill: var(--main-focus);
}

.card-btn:active {
  transform: translateY(3px);
}

/* 图片滚动条颜色 */
/*定义滚动条宽度和颜色*/
.card-img::-webkit-scrollbar {
  width: 4px;
}

.card-img::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.card-img::-webkit-scrollbar-thumb {
  background: #91baf7;
}

/* 悬停效果 */
.card-img::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}
</style>